<template>
    <div class="quality-assessment">
        <div class="breadcrumb-box">
            <Breadcrumb/>
        </div>
        <div class="page-content" v-loading="state.loading">
            <el-tabs>
                <el-tab-pane label="日间手术质控指标">
                    <div class="card-content-inner">
                        <div class="data-item" v-for="v in qualityControlList" :key="v.key">
                            <span class="data-num">{{ v.value }}</span>
                            <span class="data-title">{{v.name}}</span>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="监测指标">
                    <div class="card-content-inner">
                        <div class="data-item" v-for="v in monitorList" :key="v.key">
                            <span class="data-num">{{ v.value }}</span>
                            <span class="data-title">{{v.name}}</span>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup>
// 引入组件
import { onMounted, reactive, ref } from "vue";
const Breadcrumb = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/breadcrumb.vue'));
import { assessmentApi  } from "../../../api/dashbord/assessment";
import { toTimeStringZh } from "../../../utils/timeUtil";

onMounted(()=>{
    getData()
})

const keyMap = {
    mzpg:{
        name:"全麻患者入院前麻醉评估完成率",
        value:"0",
    },
    cancel:{
        name:"日间手术临时取消率",
        value:""
    },
    fjhcfss:{
        name:"非计划重返手术率",
        value:""
    },
    fjhcfjz:{
        name:"非计划重返就诊率",
        value:""
    },
    yccy:{
        name:"延迟出院率",
        value:""
    },
    zzkbf:{
        name:"日间手术患者当日转专科病房患者比例",
        value:""
    },
    h_sfl:{
        name:"随访完成率",
        value:"0%"
    },
    shbfz:{
        name:"术后并发症（出血、切口感染）发生率",
        value:""
    },
    myd:{
        name:"患者满意度",
        value:""
    },
    ryhdd:{
        name:"日间手术患者入院后等待时间",
        value:""
    },
    lyqpg:{
        name:"离院前评估完成率",
        value:""
    },
    ylfwsr:{
        name:"医疗服务收入（不含药品、耗材、检查、检验收入）占医疗收入比例",
        value:""
    },
    zzq:{
        name:"日间手术占择期手术比例",
        value:""
    },
    wcss:{
        name:"日间手术患者微创手术占比",
        value:""
    },
    sjss:{
        name:"日间手术患者四级手术比例"
    }
}

const qualityControlKey = [
    'mzpg',
    'cancel',
    'fjhcfss',
    'fjhcfjz',
    'yccy',
    'zzkbf',
    'h_sfl',
    'shbfz',
    'myd',
    'ryhdd',
    'lyqpg',
]

const monitorKey = [
    'ylfwsr',
    'zzq',
    'wcss',
    'sjss'
]

const qualityControlList = ref([])
const monitorList = ref([])
const state = reactive({
    loading: false
})

const getData = async () =>{
  try {
    
    state.loading = true
    const apiContext = assessmentApi()
    const [data1, data2, data3, data4, data5] = await Promise.all([
        apiContext.getDataCount1(), 
        apiContext.getDataCount2(), 
        apiContext.getDataCount3(),
        apiContext.getDataCount4(),
        apiContext.getDataCount5()
    ])

    qualityControlList.value = qualityControlKey.map(v=>{
      const value = data1.data[v] || data2.data[v] || data3.data[v] || data4.data[v] || data5.data[v]
      const data = { ...keyMap[v], value: v === 'ryhdd' ? toTimeStringZh(value) : (value || 0), key: v }
      return data
    })

    monitorList.value = monitorKey.map(v=>{
      const value = data1.data[v] || data2.data[v] || data3.data[v] || data4.data[v] || data5.data[v]
      const data = { ...keyMap[v], value:  value || '0', key: v }
      return data
    })

  }catch(e){
    qualityControlList.value = qualityControlKey.map(v => {
      const value = ''
      const data = { ...keyMap[v], value: value || '0', key: v }
      return data
    })

    monitorList.value = monitorKey.map(v=>{
      const value = ''
      const data = { ...keyMap[v], value: value || '0', key: v }
      return data
    })
  } finally {
    state.loading = false
  }
}

</script>

<style lang="scss">
.quality-assessment {
    .breadcrumb-box {
        background-color: #fff;
        padding: 17px 0;
    }
    .page-content {
        background-color: #fff;
        padding: 20px;
        margin: 20px;
        border-radius: 4px;
    }

    .card-content-inner {
  // display: flex;
  // flex-wrap: wrap;
  display: grid;
  grid-template-columns: repeat(6, minmax(200px, 1fr));
  row-gap: 10px;
  column-gap: 10px;
  padding: 20px;
  // align-items: flex-start;
  // align-content: flex-start;
  justify-content: center;
  .data-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: linear-gradient(to right, rgb(96, 178, 251), rgb(100, 133, 246));
    color: #fff;
    border-radius: 8px;
    padding: 20px 10px;
    box-sizing: border-box;
    
    .data-num {
      font-size: 26px;
      height: 40px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
    }
    .data-title {
      font-size: 14px;
    //   margin-top: 10px;
      height: 40px;
      display: flex;
      align-items: flex-end;
    }
  }
}

@media screen and (max-width: 2000px) {
    .card-content-inner {
      grid-template-columns: repeat(5, minmax(200px, 1fr));
    }
}
@media screen and (max-width: 1600px) {
    .card-content-inner {
      grid-template-columns: repeat(4, minmax(200px, 1fr));
    }
}
@media screen and (max-width: 1300px) {
    .card-content-inner {
      grid-template-columns: repeat(3, minmax(200px, 1fr));
    }
}
@media screen and (max-width: 800px) {
    .card-content-inner {
      grid-template-columns: repeat(2, minmax(200px, 1fr));
    }
}
@media screen and (max-width: 530px) {
    .card-content-inner {
      grid-template-columns: repeat(1, minmax(200px, 1fr));
    }
}
}
</style>